Introduction
CSS Animations is a new and nice proposed module for Cascading Style Sheets that allows the animation of HTML document elements using CSS3
CSS animations can look very complex, but at their core the basic ingredients of an animation are quite simple. A name, keyframes, and something to take your direction is all you need to start making a move.
Let’s start by look at the basic ingredients we need to create an animation in CSS. There are two main parts to any CSS animation:
- Defining the animation
- Assigning it to a specific HTML element (or elements)
You can do these in any order, but I prefer to define the animation first and then assign it – that just fits better with my process.
Rules of @keyframes
To define our CSS animation, we need to declare its keyframes using the @keyframes rule. You also need to give your animation a name which will be used to refer to it later.
For example, if you created an animation to move a Object across the screen, you might name your animation something like “obj” and your @keyframes rule would start out looking like this:
@keyframes obj{
}
What is a keyframe?
Essentially, your keyframes comprise a list describing what should happen (that is, which properties should change, how and when) over the course of the animation.
Each run through the list you provide is considered one iteration of the animation. Any animatable property that you’d like to see change over the course of one cycle of your animation needs to be listed in your keyframes. For a list of animatable properties, The Mozilla Developer Network has the most comprehensive list I’ve seen so far.
In traditional animation, keyframes were drawings of key points in an animation. Often, these would be drawn first by the senior animator and then a junior animator would draw each frame in-between to arrive at a smooth animation when all the frames were played back. CSS keyframes work in a similar way: we specify the values for the animating properties at various points during the animation with keyframes, and the browser comes up with the in between parts for us. If you have experience of programs like After Effects or Flash, you’re already familiar with some variations of this keyframe concept.
Defining your keyframes
An animation is nothing without its keyframes! We have two options for how we can define each keyframe within our @keyframes declaration: the keywords from and to; or percentages.
A very simple animation may just move an object from one place to another. In these cases, the keywords from and to are perfect for defining your keyframes.
Unsurprisingly, these work just like they sound. You write keyframes to define where to animate from, and where to animate to. If we apply these to the simple car animation I mentioned above, we would translate our car from its current position (a translation of 0) to a position that is 400px further to the right to get it across the screen:
@keyframes obj{
from {transform: translateX(0);}
to {transform: translateX(400px);}
}
In many cases, you’ll want to animate between more than just two states and that’s where defining keyframes with percentages will be more fitting.
To define your keyframes with percentages, you start with the 0% keyframe and work your way up to 100%. Any number between 0% and 100% is fair game, so you have a lot more flexibility to work with using percentages. You can also mix the from and to keywords within the same @keyframes block if you’d like.
If we wrote our obj animation using percentages for the keyframes, it would look like this:
@keyframes obj{
from {transform: translateX(0);}
to {transform: translateX(400px);}
}>
As you can see, from is equivalent to a value of 0%, and to is equivalent to a value of 100%.
If you don’t include a 0% or 100% keyframe in your list, the existing styles on the element you are animating will be used in their place. Also, you don’t have to list out your percentages strictly in ascending order. A 0% keyframe will still be considered the first keyframe of an animation even if it’s listed out of order. This gives you some flexibility to group your keyframes in a way that makes the most sense to you when you go back and read them later.